<template>
  <transition name="fade">
    <cube-popup
      :mask-closable="true"
      v-show="visible"
      @mask-click="maskClick"
      position="bottom"
      type="shop-cart-list"
      :z-index="90"
    >
      <transition name="move" @after-leave="afterLeave">
        <div v-show="visible">
          <div class="list-header">
            <h1 class="title">购物车</h1>
            <span class="empty" @click="empty">清空</span>
          </div>
          <cube-scroll class="list-content" ref="listContent">
            <ul>
              <li
                class="food"
                v-for="(food, index) of selectFoods"
                :key="food.name"
              >
                <span class="name"> {{ food.name }}</span>
                <div class="price">
                  <span class="smallFont">￥</span>
                  <span>{{ food.price * food.count }}</span>
                </div>
                <div class="cart-control-wrapper">
                  <cart-control :food="food" v-on="$listeners"></cart-control>
                </div>
              </li>
            </ul>
          </cube-scroll>
        </div>
      </transition>
    </cube-popup>
  </transition>
</template>

<script>
import cartControl from './cartControl'
import popupMixin from 'assets/mixins/popup.js'

const EVENT_SHOW = 'show'
const EVENT_ADD = 'add'
const EVENT_LEAVE = 'leave'

export default {
  name: 'shopCartList',
  mixins: [popupMixin],
  props: {
    selectFoods: {
      type: Array,
      default() {
        return []
      }

    },
  },
  created() {
    this.$on(EVENT_SHOW, () => {
      this.$nextTick(() => {
        this.$refs.listContent.refresh()
      })
    })
  },
  methods: {
    maskClick() {
      this.hide()
    },
    // 动画结束时向父组件触发离开事件
    afterLeave() {
      this.$emit(EVENT_LEAVE)
    },
    empty() {
      this.dialog =
        this.dialog ||
        this.$createDialog({
          type: 'confirm',
          content: '清空购物车',
          $events: {
            confirm: () => this.selectFoods.forEach(food => food.count = 0)
          }
        })
      this.dialog.show()
    }
  },
  watch: {
    selectFoods() {
      if (!this.visible) {
        return
      }
      this.$nextTick(() => {
        this.$refs.listContent.refresh()
      })

      const count = this.selectFoods.reduce((count, food) => count + food.count, 0)
      const NONE_FOOD = 0
      if (count === NONE_FOOD) {
        this.hide()
      }
    },
  },
  components: {
    cartControl
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/mixin.stylus';

.cube-shop-cart-list {
  bottom: 48px;

  .list-header {
    height: 40px;
    padding: 0 18px;
    background: #f3f5f7;
    border-1px(rgba(7, 17, 27, 0.1));

    .title {
      float: left;
      font-size: 14px;
      font-weight: 300;
      line-height: 40px;
      color: rgb(7, 17, 27);
    }

    .empty {
      float: right;
      font-size: 12px;
      color: rgb(0, 160, 220);
      line-height: 40px;
    }
  }

  .list-content {
    padding: 0 18px;
    max-height: 217px;
    overflow: hidden;
    background: #fff;

    .food {
      position: relative;

      // border-1px(rgba(7, 17, 27, 0.1));
      .name {
        height: 48px;
        line-height: 48px;
        font-size: 14px;
        font-weight: 300;
        color: rgb(7, 17, 27);
      }

      .price {
        position: absolute;
        right: 96px;
        top: 50%;
        transform: translate(0, -50%);
        line-height: 24px;
        font-weight: 700;
        font-size: 14px;
        color: rgb(240, 20, 20);

        .smallFont {
          font-size: 10px;
          vertical-align: middle;
        }
      }

      .cart-control-wrapper {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translate(0, -50%);
      }
    }
  }

  &.fade-enter, &.fade-leave-to {
    opacity: 0;
  }

  &.fade-enter-active, &.fade-leave-active {
    transition: all 0.3s ease-in-out;
  }

  .move-enter, .move-leave-active {
    transform: translate3d(0, 100%, 0);
  }

  .move-enter-active, .move-leave-active {
    transition: all 0.3s ease-in-out;
  }
}
</style>
